<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变换与过渡</title>
</head>
<style>
    div{
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 200px auto 0;
        /*控制过渡时间*/
        transition: 1s;
    }
    div:hover{
        background-color: yellow;
            /*放大缩小倍数*/     /*旋转角度*/
        transform: scale(2) rotate(720deg);
        border-radius: 100px;

    }
</style>
<body>
    <div></div>
</body>
</html>